<template>
  <view class="my-container">
    <view class="userInfo">
      <van-image round width="3rem" height="3rem" :src="userInfo.avatar" />
      <text class="userName">{{userInfo.nickname}}</text>
    </view>
    <view class="study-course">
      <view class="tips">
        <view class="left">
          <text class="title">{{userInfo.study_hour}}</text>
          <text class="subtitle">累计学习小时</text>
        </view>
        <view class="middle">
          <text class="title">{{userInfo.follow_count}}</text>
          <text class="subtitle">我的关注</text>
        </view>
        <view class="right">
          <text class="title">{{userInfo.course_count}}</text>
          <text class="subtitle">我的课程</text>
        </view>
      </view>
      <view class="cell">
        <van-cell title="学习历史" is-link />
        <van-cell title="消息提醒" is-link />
        <van-cell title="清除缓存" @click="clear" is-link />
        <van-cell title="商务合作" is-link />
        <van-cell title="在线客服" @click="customer" is-link />
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      userInfo: "",
    };
  },
  onLoad() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      const res = await request({ url: "my/info" });
      if (res.data.status === 0) {
        this.userInfo = res.data.message;
      }
    },
    clear() {
      uni.showToast({
        title: "清除缓存中",
        icon: "loading",
        duration: 1000,
        success: () => {
          setTimeout(() => {
            uni.showToast({
              title: "缓存清除成功",
              icon: "success",
              duration: 2000,
            });
          }, 3000);
        },
      });
    },
    customer() {
      uni.makePhoneCall({
        phoneNumber: "15270442535",
      });
    },
  },
};
</script>
<style lang="less" scoped>
/* pages/my/my.wxss */
.my-container {
  position: relative;
}

.userInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 300rpx;
  background-color: #ff8d44;
  color: #fff;
}

.study-course {
  padding: 0 20rpx;
}

.tips {
  position: absolute;
  top: 260rpx;
  left: 32rpx;
  right: 32rpx;
  border-radius: 12rpx;
  height: 174rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.title {
  text-align: center;
  font-size: 26px;
  color: #333;
}

.subtitle {
  margin-top: 10rpx;
  text-align: center;
  font-size: 12px;
  color: #a8a8a8;
  font-weight: bold;
}

.left,
.middle,
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.middle {
  position: relative;
}

.middle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30rpx;
  height: 62rpx;
  width: 3rpx;
  background-color: #ebebeb;
}

.middle::after {
  content: "";
  position: absolute;
  right: 0;
  top: 30rpx;
  height: 62rpx;
  width: 3rpx;
  background-color: #ebebeb;
}

.cell {
  margin-top: 170rpx;
}
</style>